<template>
  <div class="container">
    <el-dialog
      title="题目预览"
      :visible="dialogVisible"
      width="60%"
      @close="$emit('update:dialogVisible', false)"
    >
      <div class="dialog-preview">
        <el-row class="row-1">
          <el-col :span="6">
            <span v-if="questionsDetail.questionType === '1'"
              >【题型】: 单选题</span
            >
            <span v-if="questionsDetail.questionType === '2'"
              >【题型】: 多选题</span
            >
            <span v-if="questionsDetail.questionType === '3'"
              >【题型】: 简答题</span
            >
          </el-col>
          <el-col :span="6">
            <span>【编号】: {{ questionsDetail.id }}</span>
          </el-col>
          <el-col :span="6">
            <span v-if="questionsDetail.difficulty === '1'">【难度】:简单</span>
            <span v-if="questionsDetail.difficulty === '2'">【难度】:一般</span>

            <span v-if="questionsDetail.difficulty === '3'">【难度】:困难</span>
          </el-col>
          <el-col :span="6">
            <span>【标签】:{{ questionsDetail.tags }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <span>【学科】:{{ questionsDetail.subjectName }}</span>
          </el-col>
          <el-col :span="6">
            <span>【目录】:{{ questionsDetail.directoryName }}</span>
          </el-col>
          <el-col :span="6">
            <span>【方向】:{{ questionsDetail.direction }}</span>
          </el-col>
        </el-row>
        <hr />
        <el-row>
          <el-col :span="6">
            <span>【题干】:</span>
          </el-col>
        </el-row>
        <el-row style="margin: 10px 0" class="questionCenter">
          <el-col>
            <span>{{ questionsDetail.question }}</span>
          </el-col>
        </el-row>
      </div>

      <el-row>
        <el-col v-if="questionsDetail.questionType === '1'"
          >单选题 选项：（以下选中的选项为正确答案）</el-col
        >
        <el-col v-else-if="questionsDetail.questionType === '2'"
          >多选题 选项：（以下选中的选项为正确答案）</el-col
        >
        <el-col v-else>简答题</el-col>
      </el-row>
      <!-- 单选框 -->
      <div v-if="questionsDetail.questionType === '1'">
        <el-radio-group v-model="radio" @change="radioChange">
          <el-row
            v-for="option in questionsDetail.options"
            :key="option.id"
            style="margin: 10px 0"
          >
            <el-radio :label="option.isRight">{{ option.title }}</el-radio>
          </el-row>
        </el-radio-group>
      </div>

      <!-- 多选框 -->
      <div v-else-if="questionsDetail.questionType === '2'">
        <el-row
          v-for="option in questionsDetail.options"
          :key="option.id"
          style="margin: 10px 0"
        >
          <el-checkbox :checked="option.isRight === 1">{{
            option.title
          }}</el-checkbox>
        </el-row>
      </div>
      <hr />
      <el-row>
        <el-col>
          <span>【参考答案】：</span>
          <el-button type="danger" size="mini" @click="videoClick"
            >视频答案预览</el-button
          >
        </el-col>
      </el-row>

      <el-row class="videomasks" v-if="videoState == true">
        　<video :src="questionsDetail.videoURL" controls="controls" autoplay>
          　　
        </video>
        <meta name="referrer" content="no-referrer" />
      </el-row>
      <hr />
      <el-row style="margin: 10px 0">
        <el-col>
          <span>【答案解析】：https://cn.vuejs.org/ 有答案</span>
        </el-col>
      </el-row>
      <el-row>
        <hr />

        <el-col>
          <span>【题目备注】：https://cn.vuejs.org/ 有答案</span>
        </el-col>
      </el-row>
      <el-row style="margin-top: 25px" class="btn-close">
        <el-button type="primary" size="mini" @click="videoClose"
          >关闭</el-button
        >
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: 1,
      checked: false,
      videoState: false,
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: true,
    },
    questionsDetail: {
      type: Object,
      required: true,
    },
  },
  methods: {
    radioChange() {
      this.radio = 1;
    },
    videoClick() {
      if (!this.videoState) {
        this.videoState = true;
      } else {
        this.videoState = false;
      }
    },
    videoClose() {
      this.$emit("close");
      this.videoState = false;
    },
  },
};
</script>

<style scoped lang='scss'>
.dialog-preview {
  .row-1 {
    margin-bottom: 15px;
  }
  .questionCenter {
    color: blue;
  }
}
.btn-close {
  display: flex;
  justify-content: center;
}
</style>
